
//这里面写组件的结构
<template>
  <div class="demo">
    <h2>学校名字是{{ name }}</h2>
    <h2>学校地址是{{ address }}</h2>
    <button @click="changeBg">点击我改变背景色</button>
  </div>
</template>


// 组件交互相关的代码，数据、方法等等
<script>
// 这里还省略了Vue.extend()
export default {
    name:'School',
  data: {
    name: "东软",
    address: "成都",
  },
  methods: {
    changeBg() {
      console.log("你好");
    },
  },
  // 暴露组件的几种方法，不暴露别人用不了
  // 1.export const school = Vue.extend(options)
  // 2.这种是在script最下面加上一行 export {school}
  // 3.这种也是在script最后一行 export default school,这种还能写成export default Vue.extend(options)
  // 一般都用默认暴露，因为引用比较简单
};
</script>


// 组件的样式
<style>
.demo {
  background: yellow;
}
</style>


// 只能写这三个标签

// 非单文件组件有个问题，就是样式不能写在组件里面，但是单文件组件就可以